<template>
  <div class="index">
    <div class="header">
      <van-button
        icon="friends-o"
        size="small"
        round
        color="#242B30"
        type="info"
        @click="goPreference"
      >
        偏好
      </van-button>

      <van-button
        icon="manager-o"
        size="small"
        round
        color="#242B30"
        type="info"
        @click="goUserInfo"
      >
        我的
      </van-button>
    </div>
    <div class="avatar">
      <div class="img">
        <!-- <img :src="item" /> -->
        <img src="https://img01.yzcdn.cn/vant/cat.jpeg" alt="" />
      </div>
    </div>
    <div class="avatar-btn">
      <van-button icon="clear" size="small" round type="info">
        next
      </van-button>
      <van-button @click="signOut" icon="like" size="small" round type="danger">
        退出
      </van-button>
    </div>
    <div class="footer">
      <img src="../assets/svg.png" />
    </div>
  </div>
</template>

<script>
import { ElNotification } from "element-plus";
import { useRouter } from "vue-router";
export default {
  data() {
    return {};
  },

  setup() {
    const $router = useRouter();
    const signOut = () => {
      ElNotification({
        title: "退出登录",
        message: "请从新登录",
        type: "info",
      });
      $router.push("/Login");
    };

    return {
      signOut,
    };
  },
};
</script>

<style scoped>
/* @primary-color: #1890ff; */
.index {
  width: 1500px;
  height: 100%;
  overflow: hidden;
}
.header {
  color: #242b30;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  /* font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px; */
}
.avatar-btn {
  color: #242b30;
  display: flex;
  justify-content: space-between;
  align-items: center;

  position: absolute;
  z-index: 12;
  width: 1500px;
  padding: 0 10px;
  box-sizing: border-box;
}
.avatar {
  height: 330px;
  width: 330px;
  margin: 0 auto;
  background: url("../assets/beijing.png");
  background-size: 100%;
}
.avatar .img {
  height: 100px;
  width: 100px;
  margin: 0 auto;
  padding-top: 111px;
}
.avatar .img img {
  display: none;
}
.avatar .img img:nth-child(1) {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  display: block;
}

.footer {
  z-index: 99;
  width: 100%;
  height: 30vh;
  position: fixed;
  bottom: 0;
  margin: auto;
  left: 0;
  right: 0;
}
.footer img {
  height: 100%;
  width: 100%;
}
.van-popup--center {
  background: transparent;
}
.font {
  color: #000000;
}
van-button {
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: #000;
  border-radius: 50px;
  color: #fff;
}
</style>
